<template>
  <div id="menus">
    <el-card>
      <div slot="header">
        <span>菜单管理</span>
        <el-button type="primary" @click=" dlVisible=true;formMenus.parent_id=0;getMenus">添加顶级菜单</el-button>
      </div>
      <el-tree v-loading="loading" :data="menus" :props="{label:'menu_name',children:'children'}">
        <span slot-scope="{data,node}" class="olcontent">
                      <i :class="data.icon"></i>
                      {{data.menu_name}}
                       <el-button type="primary" size="mini" @click=" dlVisible=true;formMenus.parent_id=data.id" class="addch">添加下级菜单</el-button>
                      <el-button type="text" size="mini" @click.stop="edlVisible=true;eformMenus=data" icon="el-icon-edit" class="editch">编辑</el-button>
                      <el-button type="text" size="mini" @click.stop="del(data.id)" icon="el-icon-cancel" class="delch">删除</el-button>
                      <el-button type="text" @click.stop="sort(data.id,'up')" icon="el-icon-arrow-up" class="upch"></el-button>
                       <el-button type="text" @click.stop="sort(data.id,'down')" icon="el-icon-arrow-down" class="downch"></el-button>
                  </span>
      </el-tree>
    </el-card>
    <el-dialog title="编辑菜单" :visible="edlVisible" width="40%" :show-close="false">
      <el-form :model="eformMenus" ref="eformMenus" label-width="120px" :rules="rules">
        <el-form-item label="名称" prop="menu_name">
          <el-input v-model="eformMenus.menu_name"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="eformMenus.icon"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="router">
          <el-input v-model="eformMenus.router"></el-input>
        </el-form-item>
        <el-form-item label="是否显示到导航" prop="status">
          <el-select v-model="eformMenus.status" placeholder="">
            <el-option label="显示" value="1" checked> </el-option>
            <el-option label="不显示" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
              <el-button @click="ecancel">取 消</el-button>
              <el-button type="primary" @click="edit">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog title="添加菜单" :visible="dlVisible" width="40%" @close="cancel">
      <el-form :model="formMenus" ref="formMenus" label-width="120px" :rules="rules">
        <el-form-item label="名称" prop="menu_name">
          <el-input v-model="formMenus.menu_name"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="formMenus.icon"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="router">
          <el-input v-model="formMenus.router"></el-input>
        </el-form-item>
        <el-form-item label="是否显示到导航" prop="status">
          <el-select v-model="formMenus.status" placeholder="">
            <el-option label="显示" value="1" checked> </el-option>
            <el-option label="不显示" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="add">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dlVisible: false,
        edlVisible: false,
        loading: false,
        menus: [],
        formMenus: {
          menu_name: "",
          parent_id: "",
          router: "",
          status: "1",
          icon: "el-icon-info"
        },
        eformMenus: {
          menu_name: "",
          status: "1",
          icon: "",
          router: "",
          id: ''
        },
        rules: {
          menu_name: [{
            validator: (rule, val, callback) => {
              this.axios.get(`/menus/exists/menu_name/${val}`).then(ret => {
                if (ret.data == true) {
                  callback(new Error("该名称已被注册"));
                } else {
                  callback();
                }
              });
            },
            trigger: "change"
          }]
        }
      };
    },
    created() {
      this.getMenus();
    },
    methods: {
      //编辑
      edit() {
        this.$refs.editformMenus.validate((flag) => {
          if (flag) {
            this.axios.put(`/menus/edit/${this.eformMenus.id}`, {
              menu_name: this.eformMenus.menu_name,
              router: this.eformMenus.router,
              icon: this.eformMenus.icon,
              status: this.eformMenus.status
            }).then(() => {
              this.$message.success("编辑成功");
              this.edlVisible = false;
              this.$refs.eformMenus.resetFields();
              this.getMenus();
              this.$root.$emit('freshMnues');
            })
          }
        })
      },
      //编辑里面的取消
      ecancel() {
        this.edlVisible = false;
        this.$refs.eformMenus.resetFields();
      },
      //添加里面的取消
      cancel() {
        this.dlVisible = false;
        this.$refs.formMenus.resetFields();
      },
      //添加
      add() {
        this.$refs.editformMenus.validate((flag) => {
          if (flag) {
            this.axios.post("/menus/add", this.formMenus).then(() => {
              this.$message.success("添加成功");
              this.dlVisible = false;
              this.$refs.formMenus.resetFields();
              this.getMenus();
              this.$root.$emit('freshMnues');
            });
          }
        })
      },
      //分类
      sort(id, dir) {
        this.axios.put(`/menus/sort/${id}/${dir}`).then(() => {
          this.getMenus();
          this.$root.$emit('freshMnues');
        });
      },
      //删除
      del(id) {
        this.$confirm("确定删除吗？", "提示")
          .then(() => {
            this.axios
              .delete(`/menus/del/${id}`)
              .then(() => {
                this.$message.success("删除成功");
                this.getMenus();
                this.$root.$emit('freshMnues');
              })
              .catch(() => {
                this.$message.error("删除失败");
              });
          })
          .catch(() => {});
      },
      //获取
      getMenus() {
        this.loading = true;
        this.axios
          .get("/menus")
          .then(ret => {
            this.loading = false;
            this.menus = ret.data;
          })
          .catch(() => {
            this.$message.error("菜单获取失败");
          });
      }
    }
  };
</script>
<style>
  #menus .el-tree-node__content {
    padding: 10px;
    margin: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  #menus .el-button--success {
    margin-left: 50px;
  }
  #menus .olcontent {
    position: relative;
  }
  #menus .addch {
    position: absolute;
    left: 550px;
    top: -5px;
  }
  #menus .editch {
    position: absolute;
    left: 700px;
    top: -5px;
  }
  #menus .delch {
    position: absolute;
    left: 785px;
    top: -5px;
  }
  #menus .upch {
    position: absolute;
    left: 870px;
    top: -10px;
  }
  #menus .downch {
    position: absolute;
    left: 910px;
    top: -10px;
  }
</style>

